<template>
  <div class="pagination-container__wrap" ref="paginationCon" v-show= "show">
    <div class="pagination-container" v-if="type===1">
      <p class="left-arrow"  @click="clickToGetPrevPage" v-if="currentPage>1">
          <yun-icon name="left_arrow" size="12px"></yun-icon>
      </p>
      <p class="number-box" v-if="centerFirstPage>=2" @click="clickToChangePage(1)">1</p>
      <p class="number-box"  v-if="centerFirstPage>2" @click="clickToGetPrevGroup">...</p>
      <p @click="clickToChangePage(value)" v-if="pages>1" :class="(centerFirstPage+index)===currentPage?'number-box--active':'number-box'" v-for="value,index in changeCenterPage" >{{value}}</p>

      <p class="number-box"  v-if="centerFirstPage+6<pages" @click="clickToGetNextGroup">...</p>
      <p class="number-box" v-if="centerFirstPage+6<=pages" @click="clickToChangePage(pages)">{{pages}}</p>
      <p class="right-arrow" @click="clickToGetNextPage" v-if="currentPage<pages">
          <yun-icon name="left_arrow" size="12px"></yun-icon>
       </p>
    </div>

    <div class="pagination-container2" v-if="type===2">
      <div class="box"  v-if="paginationState==='loading'">
        <loading :type=2></loading>
      </div>
      <div class="box" v-if="paginationState==='over'">已经到底了~</div>
    </div>
  </div>
</template>


<script>
  import config from '../../action/config';
  import Loading from '../../components/pc/loading';


  export default {
    name:'pagination',
    components:{
      Loading
    },
    props:{
      pages:{
        type:[Number,String],
        default:1,
      },

      type:{
        type:Number,
        default:1
      },
      paginationState:{
        type:String,
        default:'over'
      },

    },
    data(){
      return {
        // pages:13,
        currentPage:1,
        centerFirstPage:1,
        show:{
          type:Boolean,
          default:true,
        }
      }
    },

    created(){
      this.$emit(config.event.listenPageChange,this.currentPage);

      if(this.type===2){

        this.scrollToGetNext();
      }
    },
    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    },
    watch:{
      currentPage(pre,now){
        if(this.type===1){
          this.clickToTop();
        }
        this.$emit(config.event.listenPageChange,pre)
      }
    },
    computed:{
      changeCenterPage(){
        //正常6个
        let {pages,centerFirstPage} = this;
        if(pages - centerFirstPage>=6){
          return  [centerFirstPage,centerFirstPage+1,centerFirstPage+2,centerFirstPage+3,centerFirstPage+4,centerFirstPage+5]
        }else{
          if(centerFirstPage>0){
            let arr = [];
            for (let i = 0; i < pages - centerFirstPage+1; i++) {
              arr.push(centerFirstPage+i)
            }
            return  arr
          }
        }
      }
    },

    methods:{

      clickToTop(){
        clearInterval(this.timer)
        this.changeStyleToTop(30);
      },
      changeStyleToTop(time){
        if(process.browser){
          let top = document.documentElement.scrollTop;
          let scrollNum = top/100;
          let time2 =time/scrollNum/1000;
          let that = this;
          if(top<5000){
            this.timer = setInterval(function () {
              if(document.documentElement.scrollTop>0){
                document.documentElement.scrollTop-=100
              }else{
                clearInterval(that.timer)
              }

            },time2)
          }else{
            document.documentElement.scrollTop=0;
          }

        }

      },

      setCurrentPage(n){
        this.currentPage  = 1;
        this.$emit(config.event.listenPageChange,1)
      },
      RefreshCurrentPage(n){
        console.log(this.currentPage);
        this.$emit(config.event.listenPageChange,this.currentPage)
      },

      getElementToPageTop(el) {
        if(el.parentElement) {//父级元素须为定位元素
          return this.getElementToPageTop(el.parentElement) + el.offsetTop
        }
        return el.offsetTop
      },

      scrollToGetNext(){
        if(process.browser){
          document.addEventListener('scroll',()=>{
            if(this.$refs.paginationCon){
              let pageConTop = this.getElementToPageTop (this.$refs.paginationCon);
              let scrollTop = document.documentElement.scrollTop ||document.body.scrollTop;
              let screenTop = scrollTop + window.innerHeight ;
              // console.log(screenTop)
              // console.log(window.innerHeight )
              // console.log(pageConTop)
              if(screenTop>=pageConTop&&this.paginationState==='over') {
                // console.log('enter1')

                if (this.currentPage < this.pages) {
                  this.currentPage = this.currentPage + 1;
                }
              }
               else{
              }

            }
          })


        }
      },



      // 跳到下一页
      clickToGetNextPage(){
        let {pages,centerFirstPage,currentPage} = this;
        if(pages - centerFirstPage>=6){
          this.currentPage = currentPage + 1;
          this.centerFirstPage = centerFirstPage +1;
        }else  if(currentPage <pages){
          this.currentPage = currentPage + 1;
        }
      },

      //跳到前一页
      clickToGetPrevPage(){
        let {centerFirstPage,currentPage} = this;
        if(centerFirstPage>1){
          this.currentPage = currentPage - 1;
          this.centerFirstPage = centerFirstPage -1;
        }
        else if(currentPage>1){
          this.currentPage = currentPage - 1;
        }
      },

      //点击前面的省略号
      clickToGetPrevGroup(){
        let {centerFirstPage} = this;

        if(centerFirstPage>7){
          this.currentPage = centerFirstPage - 1;
          this.centerFirstPage = centerFirstPage -6;
        }
        else if(centerFirstPage<=7){
          this.currentPage = 6;
          this.centerFirstPage = 1;
        }
      },

      //点击后面的省略号
      clickToGetNextGroup(){
        let {centerFirstPage,pages} = this;

        if(centerFirstPage+5+6<pages){
          this.currentPage = centerFirstPage +6;
          this.centerFirstPage = centerFirstPage +6;
        }
        else if(centerFirstPage+5+6>=pages){
          this.currentPage = pages-5;
          this.centerFirstPage = pages-5;
        }
      },

      //点击页数改变页数
      clickToChangePage(currentPage){
        let {pages} = this;
        if(pages<7){
          this.centerFirstPage = 1;
          this.currentPage = currentPage;
        }
        else if(currentPage>=pages - 5){
          this.centerFirstPage = pages - 5;
          this.currentPage = currentPage;
        }

        else if(currentPage>=7){
          this.centerFirstPage = currentPage;
          this.currentPage = currentPage;

        }else if(currentPage<7){
          this.centerFirstPage = 1;
          this.currentPage = currentPage;
        }
      }
    }


  }

</script>

<style lang="scss">
   .pagination-container__wrap{


     .pagination-container{
       @extend %flex-row-center;

       .number-box{
         margin:0 4*$length;
         width:40*$length;
         height:36*$length;
         border-radius:4*$length;
         @include fontStyle(14,36,500,#666,center);
         background-color: #fff;
         @extend %animate-transition;
         @extend %cursorPointer;

         &:hover{
           background-color: #00AAE6;
           border-radius:0;
           color:#fff;

         }
       }

       .number-box--active{
         margin:0 4*$length;
         width:40*$length;
         height:36*$length;
         background-color: #00AAE6;
         border-radius:0;
         @include fontStyle(14,36,500,#fff,center);
         @extend %animate-transition;
         @extend %cursorPointer;

         &:hover{
           background-color: #00AAE6;
           border-radius:0;
           color:#fff;

         }
       }

       .left-arrow{
         margin:0 4*$length;
         width:40*$length;
         height:36*$length;
         border-radius:4*$length;
         background-color: #fff;
         @extend %animate-transition;
         @extend %cursorPointer;
         @extend %inlineBlockV;
         transform: rotate(180deg);
         text-align: center;

         &:hover{
           background-color: #00AAE6;
           border-radius:0;
           color:#fff;
           i{
             color:#fff
           }

         }
       }

       .right-arrow{
         margin:0 4*$length;
         width:40*$length;
         height:36*$length;
         border-radius:4*$length;
         background-color: #fff;
         @extend %animate-transition;
         @extend %cursorPointer;
         @extend %inlineBlockV;
         text-align: center;
         &:hover{
           background-color: #00AAE6;
           border-radius:0;
           color:#fff;
           i{
             color:#fff
           }
         }
       }

     }

     .pagination-container2{
       .box{
         height:40*$length;
         @extend %flex-row-center;
         background: #fff;
         border-radius: 4*$length;
         color:#999;
         font-size: 12px;


       }
     }
   }
</style>
